<template>
  <div id="opheader">
    <el-container>
        <el-header class="header">
          <div class="banner">智慧农业物联网平台</div>
          <div class="user-info">
            <i class="el-icon-place" style="font-size:25px;"></i>
            &nbsp;
            <span>实验教学楼</span>
            |
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <span>FRANCESCA S.</span>
                &nbsp;
                <div style="display:inline-block;float:right;height:20px;width:20px;margin-top:5px;margin-left:15px;">
                  <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" size="small"></el-avatar>
                  <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
                </div>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-user-solid">个人信息</el-dropdown-item>
                <el-dropdown-item icon="el-icon-message-solid" divided> 消息提示</el-dropdown-item>
                <el-dropdown-item command="logout" icon="el-icon-switch-button" divided>退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            
          </div>
        </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu default-active="oxyWatch" :router="true">
            <el-menu-item index="oxyWatch">
              <div class="nav-icon nav-icon-flower"></div>
              <span slot="title">土壤养分检测</span>
            </el-menu-item>
            <el-menu-item index="artIrrigate">
              <div class="nav-icon nav-icon-gardening-spirinkler"></div>
              <span slot="title">智能灌溉</span>
            </el-menu-item>
            <el-menu-item index="fieldWatch">
              <div class="nav-icon nav-icon-outdoors-landscape-meadow"></div>
              <span slot="title">田间监控</span>
            </el-menu-item>
            <el-menu-item index="atmWatch">
              <div class="nav-icon nav-icon-farming-field-sun"></div>
              <span slot="title">气象监测</span>
            </el-menu-item>
            <el-menu-item index="table">
              <div class="nav-icon nav-icon-insect-head"></div>
              <span slot="title">虫害监测</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
        <el-main :style="{height:mainheight+'px'}">
          <router-view></router-view>
        </el-main>
        <el-footer style="text-align:center;">版本所有©2020智慧农业物联网平台</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: 'opheader',
  data(){
    return {
      // router:this.$store.state.router,
      mainheight:window.innerHeight-120
    }
  },
  components: {
  },
  methods: {
    async handleCommand(command) {
      this.$message({
        message:'跳转到登录页面！',
        type: 'success'
        });
      if(command === 'logout'){
        await this.$store.dispatch('user/logout')
        this.$router.push('/login');
      }
    }
  }
}
</script>

<style scoped>
#opheader{
  padding:0;
  margin:0;
}
.header{
  background:#1989FA;
  /* height:100%; */
}
.banner{
  float:left;
  width:400px;
  font-size:32px;
  font-weight:bold;
  font-family: 黑体;
  color:white;
  height:60px;
  line-height:60px;
}
.user-info{
  float:right;
  position:static;
  width:300px;
  height:60px;
  line-height:60px;
  color:white;
}
.el-dropdown-link{
  width:100px;
  height:60px;
  color:white;
  cursor:pointer;
}
.el-dropdown-link:hover{color:#E97F35;font-weight:bold;}
.nav-icon{
  width:18px;
  height:18px;
  margin:0 5px 0 0;
  display:inline-block;
}
.nav-icon-flower{
  background:url('../images/icon/plant-flowers.png');
  background-repeat:no-repeat;
  background-size:cover;
}
.nav-icon-gardening-spirinkler{
  background:url('../images/icon/gardening-spirinkler.png');
  background-repeat:no-repeat;
  background-size:cover;
}
.nav-icon-outdoors-landscape-meadow{
  background:url('../images/icon/outdoors-landscape-meadow.png');
  background-repeat:no-repeat;
  background-size:cover;
}
.nav-icon-farming-field-sun{
  background:url('../images/icon/farming-field-sun.png');
  background-repeat:no-repeat;
  background-size:cover;
}
.nav-icon-insect-head{
  background:url('../images/icon/insect-head.png');
  background-repeat:no-repeat;
  background-size:cover;
}
</style>
